<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>

                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr class="item">
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr class="item">
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr class="item">
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr class="item">
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        合计：
                    </td>
                    <td colspan="2" class="sum"></td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        //获取事件源
        var cxbtn = document.querySelector('#j_cbAll')
        var ipt = document.querySelectorAll('#j_tb input')
        var items = document.querySelectorAll('.item')
        var sum = document.querySelector('.sum')
        var money = document.querySelectorAll('.item td:last-child')
         
        var sumNum = 0 //设置价格总和初始值
        //注册点击事件实现全选
        cxbtn.onclick = function () {
            //只要点击就重置为0
            sumNum = 0
            for (var i = 0; i < ipt.length; i++) {
                //实现全选/反选功能
                ipt[i].checked = this.checked
            }
            //如果全选按钮为true，则把价格累加
            if(cxbtn.checked == true) {
                for(var i = 0; i < money.length; i++) {
                    sumNum += +money[i].innerHTML
                }
            } 
                //为合计价格赋值
                sum.innerHTML = sumNum
        }
        //给每个复选框注册点击事件按
        for (var i = 0; i < ipt.length; i++) {
            ipt[i].onclick = function () {
                //每点击一个都把价格总和初始值重置
                sumNum = 0
                //获取所有复选按钮的checked属性
                var checks = document.querySelectorAll('#j_tb input:checked')
                //如果复选按钮全部被选中，则全选按钮也会被赋值为勾选状态
                if (checks.length == ipt.length) {
                    cxbtn.checked = true
                } else {
                    //否则全选按钮不会被勾选
                    cxbtn.checked = false
                }
                
                for (var i = 0; i < ipt.length; i++) {
                    //每次触发复选按钮点击事件时，就判断一次所有复选按钮的勾选状态
                    //（此时价格总和初始值被重置，所以每次点击事件都会单独计算出价格总和）
                    // 若被勾选，则把被勾选的那一个价格累加到总和
                    if (ipt[i].checked == true) {
                        sumNum += +money[i].innerHTML
                    }
                    //把累加的总和赋值给合计值
                    sum.innerHTML = sumNum
                }
            }

        }
    </script>
</body>

</html>